<template>
  <div>
    <SonVue></SonVue>
  </div>
  <div>
    <h2>{{ num }}</h2>
  </div>
</template>
<script>

import { computed } from "@vue/reactivity";

import SonVue from "./components/Son.vue";
import emitter from "./mitt";
export default {
  data() {
    return {
      age: 19,
      name: '张三',
      sex: '男',
      num: 100
    }
  },
  components: {
    SonVue
  },
  provide() {
    return {
      name: computed(() => this.name),
      age: computed(() => this.age),
      sex: this.sex,
      message: '自我介绍'
    }
  },
  created() {
    emitter.on('add', () => {
      this.num++,
        this.age++
    }),
      emitter.on('change', () => {
        this.name = '我是谁'
      }),
      emitter.on('change_age', (info) => {
        this.age = info
      })
  }
}
</script>

<style scoped>

</style>